// 常用 flex 布局工具类
.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.flex-between {
  justify-content: space-between;
}
.flex-around {
  justify-content: space-around;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-1 {
  flex: 1;
}

// gap 工具类，4px 步进，最大 gap-40
@for $i from 1 through 10 {
  $gap: 4 * $i;
  .gap-#{$gap} {
    gap: #{$gap}px;
  }
}

// padding 工具类，4px 步进，最大 p-40
@for $i from 1 through 10 {
  $space: 4 * $i;
  .p-#{$space} {
    padding: #{$space}px;
  }
}

// padding 方向工具类
@for $i from 1 through 10 {
  $space: 4 * $i;
  .pt-#{$space} {
    padding-top: #{$space}px;
  }
  .pb-#{$space} {
    padding-bottom: #{$space}px;
  }
  .pl-#{$space} {
    padding-left: #{$space}px;
  }
  .pr-#{$space} {
    padding-right: #{$space}px;
  }
}

// margin 工具类，4px 步进，最大 m-40
@for $i from 1 through 10 {
  $space: 4 * $i;
  .m-#{$space} {
    margin: #{$space}px;
  }
}

// margin 方向工具类
@for $i from 1 through 10 {
  $space: 4 * $i;
  .mt-#{$space} {
    margin-top: #{$space}px;
  }
  .mb-#{$space} {
    margin-bottom: #{$space}px;
  }
  .ml-#{$space} {
    margin-left: #{$space}px;
  }
  .mr-#{$space} {
    margin-right: #{$space}px;
  }
}
